<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>首页</title>
  <link rel="stylesheet" type="text/css" href="css/aui.css" />
  <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

<body>
  <div class="search-container search-fixed">
    <div class="search-wrapper">
      <div class="search-icon">
        <i class="aui-iconfont aui-icon-search"></i>
      </div>
      <div class="search-input">
        <input placeholder="搜索医院" autocomplete="off" />
      </div>
    </div>
  </div>

  <div class="adv-container">
    <div class="adv-wrapper">
      <img src="images/ad.png" />
    </div>
  </div>

  <div class="nav-container">
    <div class="nav-wrapper">
      <a class="nav-item" href="hsjc.html">
        <img src="images/nav_1.png" />
        <h4>核酸检测</h4>
      </a>
      <a class="nav-item" href="all.html">
        <img src="images/nav_2.png" />
        <h4>全部科室</h4>
      </a>
      <a class="nav-item" href="notice.html">
        <img src="images/nav_3.png" />
        <h4>公告</h4>
      </a>
      <a class="nav-item" href="help.html">
        <img src="images/nav_4.png" />
        <h4>帮助中心</h4>
      </a>
      <a class="nav-item" href="center.html">
        <img src="images/nav_5.png" />
        <h4>个人中心</h4>
      </a>
    </div>
  </div>

  <div class="div-line"></div>

  <div class="filter-container">
    <div class="filter-wrapper">
      <div class="filter-left">
        <h4>按区域</h4>
        <i class="arrow-down"></i>
      </div>
      <div class="filter-right">
        <div class="filter-item filter-item-active">
          <span>综合排序</span>
          <i class="filter-rank"></i>
        </div>
        <div class="filter-item">
          <span>按距离</span>
          <i class="filter-location"></i>
        </div>
      </div>
    </div>

    <div class="filter-area-list" style="display:none;">
      <div class="filter-area-item filter-area-active">
        <a href="javascript:;">全部</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">东城区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">西城区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">朝阳区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">丰台区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">石景山区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">海淀区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">门头沟区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">房山区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">通州区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">顺义区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">昌平区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">大兴区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">怀柔区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">平谷区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">密云区</a>
      </div>
      <div class="filter-area-item">
        <a href="javascript:;">延庆区</a>
      </div>
    </div>
  </div>

  <div class="origin-list">
    <!-- <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_1.png" />
      </div>
      <div class="origin-body">
        <h4>北京协和医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天8:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_2.png" />
      </div>
      <div class="origin-body">
        <h4>中国人民解放军总医院(301医院)</h4>
        <p>
          <span>三级甲等</span>
          <span>每天08:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_3.png" />
      </div>
      <div class="origin-body">
        <h4>北京大学第一医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天16:00放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_4.png" />
      </div>
      <div class="origin-body">
        <h4>北京大学第三医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天07:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_5.png" />
      </div>
      <div class="origin-body">
        <h4>北京医学科学院肿瘤医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天9:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_1.png" />
      </div>
      <div class="origin-body">
        <h4>北京协和医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天8:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_2.png" />
      </div>
      <div class="origin-body">
        <h4>中国人民解放军总医院(301医院)</h4>
        <p>
          <span>三级甲等</span>
          <span>每天08:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_3.png" />
      </div>
      <div class="origin-body">
        <h4>北京大学第一医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天16:00放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_4.png" />
      </div>
      <div class="origin-body">
        <h4>北京大学第三医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天07:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_5.png" />
      </div>
      <div class="origin-body">
        <h4>北京医学科学院肿瘤医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天9:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_3.png" />
      </div>
      <div class="origin-body">
        <h4>北京大学第一医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天16:00放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_2.png" />
      </div>
      <div class="origin-body">
        <h4>中国人民解放军总医院(301医院)</h4>
        <p>
          <span>三级甲等</span>
          <span>每天08:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_3.png" />
      </div>
      <div class="origin-body">
        <h4>北京大学第一医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天16:00放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_4.png" />
      </div>
      <div class="origin-body">
        <h4>北京大学第三医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天07:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_5.png" />
      </div>
      <div class="origin-body">
        <h4>北京医学科学院肿瘤医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天9:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_1.png" />
      </div>
      <div class="origin-body">
        <h4>北京协和医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天8:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_2.png" />
      </div>
      <div class="origin-body">
        <h4>中国人民解放军总医院(301医院)</h4>
        <p>
          <span>三级甲等</span>
          <span>每天08:30放号</span>
        </p>
      </div>
    </a>
    <a class="origin-item" href="hospital.html">
      <div class="origin-logo">
        <img src="images/hos_3.png" />
      </div>
      <div class="origin-body">
        <h4>北京大学第一医院</h4>
        <p>
          <span>三级甲等</span>
          <span>每天16:00放号</span>
        </p>
      </div>
    </a> -->

  </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/tagetUrl.js"></script>
<script src="js/common.js"></script>
<script src="js/dayjs.min.js"></script>
<script type="text/javascript">

  function getScrollTop () {
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
      scrollTop = document.documentElement.scrollTop;
    }
    else if (document.body) {
      scrollTop = document.body.scrollTop;
    }
    return scrollTop;
  }

  function fixNavs () {
    var scrollTop = getScrollTop();
    if (scrollTop >= 200) {
      $('.filter-container').addClass('filter-fixed');
    } else {
      $('.filter-container').removeClass('filter-fixed');
    }
  }

  $(document).ready(function () {
    window.onscroll = function () {
      fixNavs();
    };

    //首页初始化数据
    loadHospital();

  });

  $('.filter-item').click(function () {
    $('.filter-item').removeClass('filter-item-active');
    $(this).addClass('filter-item-active');
  })

  $('.filter-left').click(function () {
    var name = $(this).find('i').attr('class');
    if (name == 'arrow-down') {
      $(this).find('i').removeClass('arrow-down');
      $(this).find('i').addClass('arrow-up');
      $('.filter-area-list').css('display', 'flex');
    }
    else if (name == 'arrow-up') {
      $(this).find('i').addClass('arrow-down');
      $(this).find('i').removeClass('arrow-up');
      $('.filter-area-list').css('display', 'none');
    }
  })

  $('.filter-area-item').click(function () {
    $('.filter-area-item').removeClass('filter-area-active');
    $(this).addClass('filter-area-active');

    $('.filter-left').find('i').addClass('arrow-down');
    $('.filter-left').find('i').removeClass('arrow-up');
    $('.filter-area-list').css('display', 'none');
  })
</script>

</html>